<template>
 <div class=''> 
     <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="text" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <el-input v-model.number="ruleForm.captcha" />
          
          <div @click="dianjifn">
            <img :src="imgs2" alt="">
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
 </div>
</template>
<script setup lang='ts'>
import { reactive, ref } from 'vue'
// 调用图形接口和登录接口
import {getcaptchadata,postlogindata} from '@/api/login'
// 引入组件
import type { FormInstance, FormRules } from 'element-plus'
// 导入rouert
import { useRouter } from 'vue-router'

// 导入stort仓库
import {useloginStore} from '@/stores/counter'
import { storeToRefs } from 'pinia'

// 创建仓库
const userStore = useloginStore()
// 解构响应式数据
const { token, userinfo } = storeToRefs(userStore)
// 解构actions方法
const { settoken, setuserinfo } = userStore

const ruleFormRef = ref<FormInstance>()
const router = useRouter()
// const username = (rule: any, value: any, callback: any) => {
//   if (!value) {
//     return callback(new Error('Please input the age'))
//   }
//   setTimeout(() => {
//     if (!Number.isInteger(value)) {
//       callback(new Error('Please input digits'))
//     } else {
//       if (value < 18) {
//         callback(new Error('Age must be greater than 18'))
//       } else {
//         callback()
//       }
//     }
//   }, 1000)
// }

// const password = (rule: any, value: any, callback: any) => {
//   if (value === '') {
//     callback(new Error('Please input the Username'))
//   } else {
//     if (ruleForm.password !== '') {
//       if (!ruleFormRef.value) return
//       ruleFormRef.value.validateField('checkPass', () => null)
//     }
//     callback()
//   }
// }
// const captcha = (rule: any, value: any, callback: any) => {
//   if (value === '') {
//     callback(new Error('Please input the Username again'))
//   } else if (value !== ruleForm.username) {
//     callback(new Error("Two inputs don't match!"))
//   } else {
//     callback()
//   }
// }
const imgs2 = ref<any>('')

const key = ref<any>(' ')

const ruleForm = reactive({
  username: '',
  password: '',
  captcha: '',
  key:''
})
const rules = reactive<FormRules>({
  username: [{ required: true, trigger: 'blur' }],
  password: [{ required: true,  trigger: 'blur' }],
  captcha: [{ required: true, trigger: 'blur' }],
})
// 点击切换图形
const dianjifn = () => {
  getcaptchadlist()
}

// 封装图形
const getcaptchadlist = () => {
  getcaptchadata().then(res => {
  // console.log(res);
  imgs2.value = res.data.img
  // console.log();
  
  key.value = res.data.key
})
} 
// 初始化执行
getcaptchadlist()


const username = ref('')
// 提交按钮
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      ruleForm.key = key.value
      console.log(ruleForm.key);
      
      postlogindata(ruleForm).then(res => {
        console.log('123',res);
        if(res.data.errNo == 0) {
          localStorage.setItem('jwt',res.data.context.jwt)
          localStorage.setItem('qwe', ruleForm.username)
          localStorage.setItem('acl',JSON.stringify(res.data.context.acl))
          // settoken(res.data.context.jwt)
          // setuserinfo(JSON.stringify(res.data.contex.acl))

          router.push('/dashboard')
          
        }
      })
      console.log(ruleForm)
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
 
</script>
<style lang='scss' scoped>

</style>
